<template>
  <div class="hello">
    <div
      :class="[status == 1 ? 'online-bg' : 'offline-bg']"
      :style="statusBarStyle"
    ></div>
    <div :class="['nav-bar', status == 1 ? 'online-bg' : 'offline-bg']">
      <div class="nav-left" @click="onLeft">
        <img
          src="https://img.alicdn.com/imgextra/i1/O1CN01ODZVUX1tlwaZo2gyS_!!6000000005943-2-tps-200-200.png"
        />
      </div>
      <span class="nav-title">{{ this.title }}</span>
      <div class="nav-right" @click="onRight">
        <img
          src="https://img.alicdn.com/imgextra/i4/O1CN01FCTl4O1G2M9dJu0jl_!!6000000000564-2-tps-200-200.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { system } from 'aliyun-livinglink-sdk'
const { statusBarHeight = 20 } = system.getSystemInfoSync()
export default {
  name: 'HelloWorld',
  props: {
    title: String,
    status: Number
  },
  methods: {
    onLeft(e) {
      this.$parent.onLeftPress(e)
    },
    onRight(e) {
      this.$parent.onRightPress(e)
    }
  },
  data() {
    return {
      statusBarStyle: {
        height: `${statusBarHeight}px`
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.online-bg {
  background-color: #0082ff;
}
.offline-bg {
  background-color: #62728f;
}

.nav-title {
  flex: 1;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
}
.nav-left img {
  height: 20px;
}
.nav-right img {
  width: 25px;
}
.nav-left {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-bar {
  padding-right: 12px;
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
</style>
